<template>
  <el-dialog
    :visible.sync="drawer"
    direction="rtl"
    width="1050px"
    :before-close="handleClose"
    class="dialogClass"
  >
    <template slot="title">
      <div class="modalTitle">
        <img
          src="../../../assets/bluelogo/drawerTitle.png"
          alt=""
          class="titleLogo"
        />{{ title }}
      </div>
    </template>
    <!-- 详情描述 -->
    <div class="descriptionsContainer">
      <div class="pageHeader">申请人员信息</div>
      <el-descriptions
        class="descriptions"
        labelClassName="label"
        contentClassName="content"
      >
      <el-descriptions-item label="姓名">{{
          formData.applicationName
        }}</el-descriptions-item>
        <el-descriptions-item label="身份证号">
          {{ formData.applicationZjh }}
        </el-descriptions-item>

        <el-descriptions-item label="联系电话">
          {{ formData.applicationTel }}
        </el-descriptions-item>
        <el-descriptions-item label="与涉案人关系">
          <dict-tag
            :options="dict.type.relation_type"
            :value="formData.applicationRelation"
          ></dict-tag>
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="descriptionsContainer">
      <div class="pageHeader">涉案人员信息</div>
      <el-descriptions
        class="descriptions"
        labelClassName="label"
        contentClassName="content"
      >
        <el-descriptions-item label="姓名">{{
          formData.name
        }}</el-descriptions-item>
        <el-descriptions-item label="身份证号" >{{
          formData.zjh
        }}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{
          formData.tel
        }}</el-descriptions-item>
        <el-descriptions-item label="居住所属区域">{{
          formData.oucodeName
        }}</el-descriptions-item>
        <el-descriptions-item :span="2" label="居住地址">{{
          formData.wholeLiveAddress
        }}</el-descriptions-item>
        <el-descriptions-item label="户籍地址">{{
          formData.residenceAddress
        }}</el-descriptions-item>
      </el-descriptions>
    </div>

    <div class="descriptionsContainer">
      <div class="pageHeader">案款发放信息</div>
      <el-descriptions
        class="descriptions"
        size="medium"
        labelClassName="label"
        contentClassName="content"
      >
        <el-descriptions-item :span="3" label="案件名称">{{
          formData.caseName
        }}</el-descriptions-item>
        <el-descriptions-item label="判决损失金额(元)">{{
          formData.personJudgmentLossAmount
        }}</el-descriptions-item>
        <el-descriptions-item :span="2" label="认定发放金额(元)">{{
          formData.personConfirmedPaymentAmount
        }}</el-descriptions-item>
        <!-- <el-descriptions-item label="应发金额(元)">{{
          formData.needMoney
        }}</el-descriptions-item> -->
        <el-descriptions-item  label="首轮发放方式">
          <dict-tag
            :options="dict.type.payment_way"
            :value="formData.firstPayWay"
          ></dict-tag>
        </el-descriptions-item>
                <el-descriptions-item :span="2" label="首轮发放账号">{{
          formData.firstPayNumber
        }}</el-descriptions-item>
        <el-descriptions-item label="首轮发放金额(元)">{{
          formData.firstPayMoney
        }}</el-descriptions-item>
        <el-descriptions-item label="首轮发放时间"
          >{{ formData.firstPayTimeString }}
        </el-descriptions-item>
        <el-descriptions-item label="首轮发放比例(%)">{{
          formData.firstPayProportion
        }}</el-descriptions-item>


        <el-descriptions-item  label="二轮发放方式">
          <dict-tag
            :options="dict.type.payment_way"
            :value="formData.secondPayWay"
          ></dict-tag>
        </el-descriptions-item>
                <el-descriptions-item :span="2" label="二轮发放账号">{{
          formData.secondPayNumber
        }}</el-descriptions-item>
        <el-descriptions-item label="二轮发放金额(元)">{{
          formData.secondPayMoney
        }}</el-descriptions-item>
        <el-descriptions-item label="二轮发放时间">{{
          formData.secondPayTimeString
        }}</el-descriptions-item>
        <el-descriptions-item label="二轮发放比例(%)">{{
          formData.secondPayProportion
        }}</el-descriptions-item>


        <el-descriptions-item  label="三轮发放方式">
          <dict-tag
            :options="dict.type.payment_way"
            :value="formData.thirdPayWay"
          ></dict-tag>
        </el-descriptions-item>

                <el-descriptions-item :span="2" label="三轮发放账号">{{
          formData.thirdPayNumber
        }}</el-descriptions-item>
        <el-descriptions-item label="三轮发放金额(元)">{{
          formData.thirdPayMoney
        }}</el-descriptions-item>
        <el-descriptions-item :span="2" label="三轮发放时间">{{
          formData.thirdPayTimeString
        }}</el-descriptions-item>

        <el-descriptions-item label="合计发放金额(元)">{{
          formData.totalMoney
        }}</el-descriptions-item>
        <el-descriptions-item label="合计发放比例(%)">{{
          formData.totalProportion
        }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <div slot="footer">
      <div class="dialog-footer">
        <el-button class="resetButton" @click="cancel"> 返回 </el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { getPayment } from "@/api/paymentManage/payment";
import { MODALTYPE } from "../../../utils/variable.js";
export default {
  dicts: ["payment_way", "relation_type"],
  name: "DetailDrawer",
  data() {
    return {
      //抽屉是否显示
      drawer: false,
      title: "",
      formData: {
        //姓名
        name: "",
        //身份证号
        zjh: "",
        //联系电话
        tel: "",
        //户籍地址
        residenceAddress: "",
        //居住地址
        liveAddress: "",
        //案件名称
        caseName: "",
        //案件id
        caseId: "",
        //个人判决损失金额
        personJudgmentLossAmount: "",
        //个人认定发放金额
        personConfirmedPaymentAmount: "",
        //应发金额
        // needMoney: "",
        //首轮发放方式
        firstPayWay: "",
        //首轮发放账号
        firstPayNumber: "",
        //二轮发放方式
        secondPayWay: "",
        //二轮发放账号
        secondPayNumber: "",
        //三轮发放方式
        thirdPayWay: "",
        //三轮发放账号
        thirdPayNumber: "",
        //首轮发放金额
        firstPayMoney: "",
        //首轮发放时间
        firstPayTime: "",
        //首轮发放比例
        firstPayProportion: "",
        //二轮发放金额
        secondPayMoney: "",
        //二轮发放时间
        secondPayTime: "",
        //二轮发放比例
        secondPayProportion: "",
        //三轮发放金额
        thirdPayMoney: "",
        //三轮发放时间
        thirdPayTime: "",
        //合计发放金额
        totalMoney: "",
        //合计发放比例
        totalProportion: "",
        totalProportion: "",
        applicationName: "",
        applicationTel: "",
        applicationZjh: "",
        applicationRelation: "",
      },
    };
  },
  props: ["type", "personId", "caseId"],
  methods: {
    // 表单重置
    reset() {
      this.formData = {
        //姓名
        name: "",
        //身份证号
        zjh: "",
        //联系电话
        tel: "",
        //户籍地址
        residenceAddress: "",
        //居住地址
        liveAddress: "",
        //案件名称
        caseName: "",
        //案件id
        caseId: "",
        //个人判决损失金额
        personJudgmentLossAmount: "",
        //个人认定发放金额
        personConfirmedPaymentAmount: "",
        //应发金额
        // needMoney: "",
        //首轮发放方式
        firstPayWay: "",
        //首轮发放账号
        firstPayNumber: "",
        //二轮发放方式
        secondPayWay: "",
        //二轮发放账号
        secondPayNumber: "",
        //三轮发放方式
        thirdPayWay: "",
        //三轮发放账号
        thirdPayNumber: "",
        //首轮发放金额
        firstPayMoney: "",
        //首轮发放时间
        firstPayTime: "",
        //首轮发放比例
        firstPayProportion: "",
        //二轮发放金额
        secondPayMoney: "",
        //二轮发放时间
        secondPayTime: "",
        //二轮发放比例
        secondPayProportion: "",
        //三轮发放金额
        thirdPayMoney: "",
        //三轮发放时间
        thirdPayTime: "",
        //合计发放金额
        totalMoney: "",
        //合计发放比例
        totalProportion: "",
        totalProportion: "",
        applicationName: "",
        applicationTel: "",
        applicationZjh: "",
        applicationRelation: "",
      };
      this.resetForm("form");
    },
    //关闭抽屉
    handleClose(done) {
      this.$emit("update:type", "");
      this.drawer = false;
    },
    //取消
    cancel() {
      this.$emit("update:type", "");
      this.drawer = false;
    },
  },
  watch: {
    type(val) {
      if (val == MODALTYPE["详情"]) {
        let params = {
          caseId: this.caseId,
          personId: this.personId,
        };
        getPayment(params).then((response) => {
          this.formData = response;
          this.title = "详情";
          this.drawer = true;
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../../assets/styles/drawer.scss";
@import '../../../assets/styles/variables.scss';
@import "../../../assets/styles/dialog.scss"; //模态框样式
::v-deep .el-descriptions-item__container {
}
::v-deep .descriptionsContainer {
  padding-top: 0px!important;
  margin-bottom: 10px;
}
::v-deep .el-dialog__body{
  padding:0px 30px 0px 30px !important;
}
::v-deep .el-descriptions-item__content {
  margin-left: 0px !important;
}
::v-deep .label {
  width: 120px;
  display: inline-block;
  text-align: right;
}
.dialogClass{
 ::v-deep .el-dialog{
  top: -50px;
  }
}


.descriptionsContainer {
  border-bottom: 1px solid #E8E8E8;
  padding-bottom: 20px;

  ::v-deep.row {
    margin-left: 35px !important;
  }

  ::v-deep .el-descriptions {
    margin-left: -20px;
  }

  ::v-deep .el-row {
    left: -15px !important;
  }

  //详情描述框
  ::v-deep .label {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #5E5C5C !important;
    margin-top: 10px;
  }

  ::v-deep .content {
    font-size: 14px;
    margin-left: 30px;
    margin-top: 30px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #5E5C5C;
  }
}

.descriptions {

  padding-bottom: 20px;

  ::v-deep.row {
    margin-left: 35px !important;
  }

  ::v-deep .el-descriptions {
    margin-left: 5px;
  }

  ::v-deep .el-row {
    left: -15px !important;
  }

  //详情描述框
  ::v-deep .label {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #5E5C5C !important;
    margin-top: 30px;
  }

  ::v-deep .content {
    font-size: 14px;
    margin-left: 30px;
    margin-top: 30px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #5E5C5C;
  }
}

.footButton {
  display: flex;
  position: absolute;
  right: 10px;
  bottom: 10px;

  .searchButton {
    width: 73px;
    border: 0px;
    height: 32px;
    background: $form-button-background-color;
    border-radius: 3px;
    font-size: $form-button-font-size;
    margin-right: 10px;
    font-family: $font-family;
    font-weight: $form-button-font-weight;
    letter-spacing: 0;
    color: #FEFBFB;
    line-height: 10px;
    letter-spacing: 2px;
  }

  //重置按钮
  .resetButton {
    border: 1px solid #2985F7;
    border-radius: 2px;
    height: 32px;
    background: #fff;
    font-size: $form-button-font-size;
    font-family: $font-family;
    line-height: 9px;
    font-weight: $form-button-font-weight;
    letter-spacing: 0;
    color: #598af9;
    letter-spacing: 2px;
  }
}
</style>>